<template>
  <a-modal
    v-model:visible="dialogFormVisible"
    title="配置节点"
    title-align="start"
    ok-text="保存"
    @cancel="handleCancel"
    @before-ok="handleSubmit"
    modal-class="formModal"
    width="35%"
  >
    <a-form ref="ruleFormRef" :model="ruleForm" :auto-label-width="true" style="height: 400px">
      <a-row class="form-tabs">
        <a-col :span="6" class="form-tabs-nav">
          <div v-for="(item, index) in state.tabList" :key="index">
            <p :class="item.id === activeTab ? 'form-tabs-active' : ''" @click="funClickTabs(item)">
              {{ item.name }}
            </p>
            <div class="form-tabs-child" v-if="item.childList.length > 0">
              <div
                v-for="(col, indexs) in item.childList"
                :key="indexs"
                :class="indexs === activeChild ? 'child-active' : ''"
                @click="funClickChild(col, indexs)"
              >
                <span>{{ col.name }}</span>
                <IconDelete @click="funDelChild(col)"></IconDelete>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="18" class="form-tabs-content">
          <div v-show="activeTab === 1">
            <a-form-item field="nodeName" label="节点名称">
              <a-input v-model="ruleForm.nodeInfo.nodeName" placeholder="请输入节点名称" :max-length="20" allow-clear />
            </a-form-item>
            <a-form-item field="nodeCode" label="编号">
              <a-input v-model="ruleForm.nodeInfo.nodeCode" placeholder="请输入编号" />
            </a-form-item>
            <a-form-item field="color" label="颜色">
              <input type="color" v-model="ruleForm.nodeInfo.color" id="colorWell" />
            </a-form-item>
          </div>
          <div v-show="activeTab === 2">
            <a-form-item field="name" label="参数名称" :show-colon="true">
              <a-input v-model="ruleForm.param.name" placeholder="请输入参数名称" :max-length="20" allow-clear />
            </a-form-item>
            <a-form-item field="code" label="遥测代号" :show-colon="true">
              <a-input v-model="ruleForm.param.code" placeholder="请输入遥测代号" :max-length="20" allow-clear />
            </a-form-item>
          </div>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script setup>
import { apiHome } from '@/api/healthAssessment'
import { Modal, Message } from '@arco-design/web-vue'
import { IconDelete } from '@arco-design/web-vue/es/icon'
import { ref, reactive, defineExpose, defineEmits, inject } from 'vue'
const emit = defineEmits(['hideRightMent'])
const dialogFormVisible = ref(false) // 弹框配置信息
const ruleFormRef = ref(null)
const activeTab = ref(1)
const updateDetail = inject('updateFunCheckDetail')
const state = reactive({
  tabList: [
    {
      name: '节点信息',
      id: 1,
      childList: []
    }
    /* {
      name: '参数',
      id: 2,
      childList: []
    } */
  ]
})
const ruleForm = reactive({
  id: '',
  parentId: '',
  nodeInfo: {
    // 节点信息
    color: '#00c7ef',
    nodeName: '',
    nodeCode: ''
  },
  param: {
    // 参数信息
    id: null,
    nodeId: '',
    name: '',
    code: '',
    satelliteId: ''
  }
})
// 显示弹框
const funShowModal = (parentId, id) => {
  activeTab.value = 1
  ruleForm.parentId = parentId
  ruleForm.id = id.value
  getNodeBaseInfo()
}

// 子级tab切换
const activeChild = ref(0)
const funClickChild = (data, index) => {
  activeTab.value = 2
  activeChild.value = index
  ruleForm.param = {
    ...data
  }
}
const funClickTabs = (data) => {
  activeTab.value = data.id
  if (data.id === 2) {
    ruleForm.param = {}
    ruleForm.param.nodeId = ruleForm.id
  }
}
// 删除参数
const funDelChild = (data) => {
  Modal.confirm({
    title: '提示',
    content: '是否删除当前参数？',
    modalClass: 'tipModal',
    onOk: () => {
      apiHome
        .getConfigParamDel(data.id)
        .then((res) => {
          if (res.code === 200) {
            getNodeBaseInfo()
            Message.success('参数删除成功！')
          } else {
            Message.error(res.message)
          }
        })
        .catch(() => {})
    }
  })
}
// 获取基本信息
const getNodeBaseInfo = () => {
  apiHome.getNodeBaseInfo(ruleForm.id).then((res) => {
    if (+res.code === 200) {
      emit('hideRightMent')
      const { nodeCode, nodeName, color, parentId, id, satelliteId, systemId, level } = res?.data
      ruleForm.nodeInfo = {
        nodeCode,
        nodeName,
        color,
        systemId,
        id,
        satelliteId,
        parentId,
        level
      }
      // state.tabList[1].childList = res.data.nodeParamInfoList
      dialogFormVisible.value = true
    }
  })
}
// 提交
const handleSubmit = (done) => {
  if (activeTab.value === 1) {
    if (!ruleForm.nodeInfo.nodeName) {
      ruleFormRef.value.setFields({
        name: {
          status: 'error',
          message: '请输入节点名称'
        }
      })
      done(false)
      return false
    }
    if (!ruleForm.nodeInfo.nodeCode) {
      ruleFormRef.value.setFields({
        code: {
          status: 'error',
          message: '请输入编号'
        }
      })
      done(false)
      return false
    }
    apiHome
      .getPortraitEdit({ ...ruleForm.nodeInfo })
      .then((res) => {
        if (+res.code === 200) {
          Message.success('节点信息修改成功!')
          updateDetail()
        } else {
          Message.error(res.message)
        }
        done(false)
      })
      .catch(() => done(false))
  } else if (activeTab.value === 2) {
    if (!ruleForm.param.name) {
      ruleFormRef.value.setFields({
        paramName: {
          status: 'error',
          message: '请输入参数名称'
        }
      })
      done(false)
      return false
    }
    if (!ruleForm.param.code) {
      ruleFormRef.value.setFields({
        paramValue: {
          status: 'error',
          message: '请输入遥测代号'
        }
      })
      done(false)
      return false
    }
    apiHome
      .getConfigParamAdd(ruleForm.param)
      .then((res) => {
        if (res.code === 200) {
          getNodeBaseInfo()
          Message.success(ruleForm.param.name + '保存成功！')
        } else {
          Message.error(res.message)
        }
        done(false)
      })
      .catch(() => {
        done(false)
      })
  }
  dialogFormVisible.value = false
}
// 弹框取消
const handleCancel = () => {
  ruleFormRef.value.resetFields()
  dialogFormVisible.value = true
}
defineExpose({
  funShowModal
})
</script>
<style lang="less" scoped></style>
